<template>
    <div class="search-page" id="search-page">
        <!-- background="#F7F9FA" -->
        <search-sub :pageType="1"  :isShowCart="false" :keyword="goodsName" @toSearch="toSearch" :isJump="false"></search-sub>
        <div class="wrap" v-if="showPage">
            <div class="menu-list" v-if='goodsList.length > 0' v-loading="loadingPage">
                <div v-for="(item,index) in goodsList" :key="index"  @click="toGoodsDetail(item.goods_id)">
                    <goods-item :item="item"></goods-item>
                </div>
            </div>
            <div class="no-data-con" v-else>
                <no-data :noDataImg="noDataImg"></no-data>
            </div>
        </div>
        <pagination-footer :total="total" :page.sync="page" :limit.sync="limits" @pagination="getGoodsList" v-if="goodsList.length > 0">
        </pagination-footer>
    </div>
</template>

<script>
import SearchSub from "@/components/SearchSub.vue";
import GoodsItem from "@/components/GoodsItem.vue";
import PaginationFooter from '@/components/PaginationFooter.vue'
import {
    goodList
} from '../../api/goods';
import {
    indexMiddle
} from '../../api/home'
export default {
    components: {
        GoodsItem,
        SearchSub,
        PaginationFooter
    },
    data() {
        return {
            showPage: false,
            loadingPage: true,
            goodsList: [],
            page: 1,
            limits: 10,
            total: 0,
            goodsName:'',
            noDataImg:require('../../assets/img/no-search.png')
        };
    },
    created() {
        this.goodsName = this.$route.query.name;
        this.getGoodsList();
    },
    methods: {
        getGoodsList() {
            const that = this;
            goodList({
                goodsName:that.goodsName,
                page: that.page,
                limits: that.limits
            }).then(res => {
                that.showPage = true;
                that.loadingPage = false;
                if (res.code == 0) {
                    that.goodsList = res.data.data;
                    that.total = res.data.total;
                }
            })
        },
        toSearch(name){
            console.log('name',name)
            this.goodsName = name;
            this.goodsList = [];
            this.page = 1;
            this.total = 0;
            this.showPage = false;
            this.loadingPage = true;
            this.getGoodsList()
        },
        toGoodsDetail(id) {
            const href = this.$router.resolve({
                path: `/goods_detail`,
                query: { goods_id: id },
            }).href;
            window.open(href, "_blank");
        },
    },
};
</script>
<style>
.el-scrollbar__wrap {
    overflow-x: hidden;
}
</style>
<style lang="scss" scoped>
::v-deep .el-loading-mask {
    width: 100%;
    height: calc(100vh - 309px);
}
.cate-page {
    min-height: 100%;
    background: #fff;
}
$sub-color: #1eb368;

.tab-con {
    width: 100%;
    height: 50px;
    background: #f7f9fa;
}

.tab-wrap {
    height: 50px;
    background: #f7f9fa;
    padding: 0 50px;
    box-sizing: border-box;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    margin: auto;

    .tab-item {
        // height: 100%;
        font-size: 14px;
        align-items: center;
        cursor: pointer;
        &:hover {
            color: var(--main-color);
        }
    }

    .all-icon {
        width: 20px;
        height: 20px;
        margin-left: 2px;
        margin-top: 2px;
    }

    .all-act {
        color: $sub-color;
    }

    .trigle-wrap {
        margin-top: 1px;
        margin-left: 4px;

        .trigle-up {
            width: 0;
            height: 0;
            border-top: 4px solid transparent;
            border-right: 3px solid transparent;
            border-left: 3px solid transparent;
            border-bottom: 4px solid #cccccc;
        }

        .trigle-up-act {
            border-top: 4px solid transparent;
            border-right: 3px solid transparent;
            border-left: 3px solid transparent;
            border-bottom: 4px solid $sub-color;
        }

        .trigle-down {
            width: 0;
            height: 0;
            border-top: 4px solid #cccccc;
            border-right: 3px solid transparent;
            border-left: 3px solid transparent;
            border-bottom: 4px solid transparent;
            margin-top: 2px;
        }

        .trigle-down-act {
            border-top: 4px solid $sub-color;
            border-right: 3px solid transparent;
            border-left: 3px solid transparent;
            border-bottom: 4px solid transparent;
        }
    }
}
.wrap {
}
.menu-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    justify-content: space-between;
    gap: 10px;
    padding-top: 12px;
    padding-bottom: 120px;
}
.box-shadow {
    box-shadow: 0px 5px 3px 1px rgba(0, 0, 0, 0.16);
}
.cate-select-modal {
    width: 1180px;
    height: 380px;
    background: #ffffff;
    // box-shadow: 0px 5px 3px 1px rgba(0, 0, 0, 0.16);
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 205px;
    z-index: 23;
    overflow: hidden;

    .cate-scroll {
        height: 100%;
    }
    .cate-scroll-third {
        height: 320px;
    }
    .btn-wrap {
        width: 100%;
        height: 60px;
        .sure-btn {
            width: 72px;
            height: 36px;
            background: var(--main-color);
            border-radius: 18px;
            color: #fff;
            font-size: 14px;
        }
    }
    .first-cate-wrap {
        width: 116px;
        height: 100%;
        background: #f0f0f0;

        ul {
            li {
                width: 116px;
                height: 66px;
                font-weight: bold;
                font-size: 14px;
                cursor: pointer;
            }

            .liact {
                background: #fff;
                color: $sub-color;
            }
        }
    }

    .second-cate-wrap {
        width: 521px;
        // flex: 1;
        height: 100%;
        background: #ffffff;
        transition: width linear 0.1s;
        ul {
            // background: red;
            // padding:0 48px;
            flex-wrap: wrap;
            font-size: 14px;

            li {
                width: 25%;
                padding: 0 20px;
                box-sizing: border-box;
                margin-top: 30px;
                cursor: pointer;
            }
        }
    }

    .line {
        width: 22px;
        height: 100%;
        background: linear-gradient(
            90deg,
            #e1e1e1 0%,
            rgba(255, 255, 255, 0.05) 100%
        );
    }

    .third-cate-wrap {
        // flex: 1;
        width: 521px;
        transition: width linear 0.1s;
    }

    .all-act {
        color: $sub-color;
    }
}
.no-data-con{
    margin-top:100px;
}
</style>